<template>
  <div class="nav">
    <div class="nav-job">
      <div>分类</div>
    </div>
    <div class="nav-item">
      <van-tree-select
        v-model:main-active-index="activeIndex"
        height="100%"
        :items="list"
      >
        <template #content>
          <div
            v-show="activeIndex === index"
            class="bananer"
            v-for="(item, index) in list"
          >
            <div><img src="../../assets/images/banner.png" alt="" /></div>
            <div class="wenzi">--- 推荐专区分类 ---</div>
            <div class="shangpin">
              <div class="shangpin-item" v-for="child in item.children">
                <router-link :to="'/goodsList?id=' + child._id"
                  ><img :src="child.icon" alt=""
                /></router-link>
                <div>{{ child.name }}</div>
              </div>
            </div>
          </div>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getCategory } from "@/api/home";

const list = ref([]);
const activeIndex = ref(0);

onMounted(() => {
  getCategory().then((res) => {
    console.log(res);
    list.value = res.category.map((item) => {
      item.text = item.name;
      item.id = item._id;

      return item;
    });
  });
});
</script>
<style scoped>
.nav-job {
  text-align: center;
  color: rgb(9, 182, 116);
  margin-top: 12px;
  font-size: 18px;
}
.nav-job div {
  border-bottom: 1px solid #ccc;
  padding: 5px 0;
}
.bananer {
  padding: 15px 0;
}
.bananer img {
  width: 230px;
}
.wenzi {
  text-align: center;
  margin-top: 20px;
}
.shangpin {
  display: flex;
  padding: 6px 0;
  font-size: 12px;
  flex-wrap: wrap;
}
.shangpin div {
  width: 70px;
  margin-left: 5px;
}
.shangpin-item img {
  width: 60px;
  height: 60px;
}
</style>
<script>
export default {
  name: "cate",
};
</script>
